<template>
	<view class="ghpay">
		<!-- 头部 -->
		<view class="ghinfo_title" :class="cancelshow?'backgroundColor_6bcbb6':'backgroundColor_989898'">
			<view class="title_top">
				<image v-if="cancelshow" src="../../static/my/qryes_a.png" mode=""></image>
				<image v-else src="../../static/my/qryes_b.png" mode=""></image>
				<view class="font18 font-ffffff">{{cancelshow?'预约成功':'预约挂号取消成功'}}</view>
			</view>
			<view class="font15 font-ffffff">{{cancelshow?'请在30分钟内完成支付':'预约挂号已取消,如需就诊请重新挂号'}}</view>
		</view>
		<!-- 支付信息 -->
		<view class="gh_title font-323232 font18 font-b">支付信息</view>
		<view class="gh_info font-9c9c9d font15">
			<text>就诊人</text>
			<view>{{detailsobj.user_the_patient.name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>就诊卡号</text>
			<view>{{detailsobj.user_the_patient.code}}</view>
		</view>
		<!-- 		<view class="gh_info font-9c9c9d font15">
			<text>门诊号</text>
			<view>{{detailsobj.member_family_name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>排队号</text>
			<view>{{detailsobj.member_family_name}}</view>
		</view> -->
		<view class="gh_info font-9c9c9d font15">
			<text>就诊时段</text>
			<view>{{detailsobj.time}} {{detailsobj.begin_time}}-{{detailsobj.end_time}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>医院名称</text>
			<view>{{detailsobj.hospital_name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>就诊科室</text>
			<view>{{detailsobj.room_name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>医生姓名</text>
			<view>{{detailsobj.doctor_name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>医生职称</text>
			<view>{{detailsobj.academic_title_name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>费用</text>
			<view class="font-ff4646 font-b">￥{{detailsobj.money}}</view>
		</view>
<!-- 		<view class="gh_info font-9c9c9d font15" v-if="!cancelshow">
			<text>取消时间</text>
			<view>{{detailsobj.deletetime}}</view>
		</view> -->
		<!-- 		<view class="gh_info font-9c9c9d font15" v-if="!cancelshow">
			<text>取消原因</text>
			<view>用户主动取消</view>
		</view> -->
		<!-- 确定支付 -->
		<view class="button_bos" v-if="cancelshow">
			<view @click="Oncancel" class="qx_button font-323232 font16">取消预约</view>
			<view @click="Onpayinfo" class="qr_button font-323232 font16">确定支付</view>
		</view>
		<!-- 返回 -->
		<view class="return_button" @click="Onreturn" v-if="!cancelshow">
			<view class="font-323232 font16">返回首页</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cancelshow: true, //取消
				id: null, //订单ID
				detailsobj: {}, //详情
			}
		},
		onLoad: function(options) {
			this.id = options.id
			//订单详情
			this.Ondetails()

		},
		methods: {
			//订单详情
			Ondetails() {
				this.$Http({
					url: 'detailsHangNumberOrder',
					data: {
						order_code: this.id,
					}
				}).then(res => {
					if (res.data.status == 'cancel') {
						this.cancelshow = false
					} else {
						this.cancelshow = true
					}
					uni.setNavigationBarColor({
						frontColor: "#ffffff", //文字颜色
						backgroundColor: this.cancelshow ? '#6bcbb6' : '#989898', // 必写项
					})
					this.detailsobj = res.data
				})
			},
			//支付
			Onpayinfo() {
				let that = this
				this.$Http({
					url: 'payHangNumberOrder',
					data: {
						order_code: this.id,
					},
					type: 'POST',
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.pacKage,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res1) {
							uni.redirectTo({
								url: '/pagesA/register/payinfo?id=' + that.id,
							});
						},
						fail: function(err) {
							uni.showModal({
								title: '支付提示',
								confirmText: '确定',
								confirmColor: '#ff4646',
								showCancel: false,
								content: '支付失败',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pagesA/my/paylist?code=hang',
										})
									}
								},
							});

						}
					});
				})
			},
			//取消
			Oncancel() {
				var that = this
				uni.showModal({
					title: '取消号源提示',
					content: '取消后您将失去本号源,是否确认取消',
					confirmText: '保留号源', //确定文字
					confirmColor: '#6bcbb6',
					cancelText: '确定取消', //取消文字
					cancelColor: '#9c9c9c',
					success(res) {
						if (res.confirm) {} else if (res.cancel) {
							that.Oncancelinfo()
						}
					}
				})
				// this.setData({
				//   cancelshow: false
				// })
			},
			//取消操作后的回调
			Oncancelinfo() {
				this.$Http({
					url: 'cancelHangNumberOrder',
					type: 'POST',
					data: {
						order_code: this.id,
					}
				}).then(res => {
					// this.detailsobj.deletetime = res.data.deletetime
					uni.setNavigationBarColor({
						frontColor: '#ffffff', // 必写项
						backgroundColor: '#989898', // 必写项
					})
					this.cancelshow = false
				})
			},
			//返回
			Onreturn() {
				uni.switchTab({
					url: '/pages/home/index',
				})
			}
		}
	}
</script>

<style>
	.ghinfo {
		padding-bottom: 150rpx;
	}

	/* 头部 */
	.ghinfo_title {
		padding: 56rpx 25rpx 38rpx 25rpx;
		/* background-color: #6bcbb6; */
	}

	.backgroundColor_6bcbb6 {
		background-color: #6bcbb6;
	}

	.backgroundColor_989898 {
		background-color: #989898;
	}

	.title_top {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.title_top image {
		height: 60rpx;
		width: 60rpx;
		margin-right: 20rpx;
	}

	/* 条码 */
	.barcode {
		padding: 38rpx 25rpx;
	}

	.barcode image {
		width: 700rpx;
		height: 130rpx;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		border: 1rpx solid #6bcbb6;
	}

	.barcode view {
		text-align: center;
	}

	/* 就诊信息 */
	.gh_title {
		margin-top: 30rpx;
		padding-left: 25rpx;
	}

	.gh_info {
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		padding: 0 25rpx;
		margin-top: 30rpx;
	}

	.gh_info view {
		width: 520rpx;
		text-align: right;
	}

	.margin_top {
		margin-top: 30rpx;
	}

	/* 取消订单 */
	.button_bos {
		width: 750rpx;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f9f9f9;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 50rpx;
	}

	.button_bos view {
		width: 300rpx;
		height: 80rpx;

		line-height: 80rpx;
		text-align: center;
	}

	.qx_button {
		background-color: #ffffff;
	}

	.qr_button {
		background-color: #6bcbb6;
		color: #ffffff;
	}

	/* 返回 */
	.return_button {
		width: 750rpx;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f9f9f9;
	}

	.return_button view {
		width: 650rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: 50rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
	}
</style>
